<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BingoTool</title>
    <link th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
    <script th:src="@{/js/bs-custom-file-input.js}"></script>
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/img/favicon.ico}"/>
    <style>
        .lblLabel {
            font-size: 0.8rem;
        }
        .caseDiv {
            display: inline-block;
            border: silver dashed 1px;
            padding: 0.25rem 0.25rem;
        }
        .caseBtn {
            padding: 0rem .5rem;
            font-size: 0.8rem;
        }
    </style>
</head>
<body class="text-center" style="background-color: dimgray; color: white;">
    <div th:replace="common::topNav(activePage='tableData')"></div>

    <div class="d-lg-flex mt-2 mb-3">
        <div class="col-lg-2"></div>

        <div class="col-lg-8 text-left">
            <h7 class="text-warning">数据目录(或文件，只识别文本文件或csv文件)*</h7>
            <div class="form-inline mb-2">
                <input class="form-control lblLabel col-md-10 mb-1" type="text" id="sourcePath">
                <input class="form-control lblLabel col-md-2 mb-1" type="text" id="sourceSplit" placeholder="默认分隔符 ;">
            </div>


            <h7 class="text-warning">条件文件</h7>
            <div class="form-inline mb-2">
                <input class="form-control lblLabel col-md-10 mb-1" type="text" id="casePath">
                <input class="form-control lblLabel col-md-2 mb-1" type="text" id="caseSplit" placeholder="默认分隔符 ;">
            </div>


            <div class="form-check">
                <input class="form-check-input" type="radio" name="handleType" id="handleType1" value="filter" checked>
                <label class="form-check-label text-warning" for="handleType1"
                       data-toggle="collapse" href="#filterSetPage" aria-expanded="false" aria-controls="filterSetPage">
                    条件过滤
                </label>
            </div>

            <div class="collapse mb-3 pl-1" id="filterSetPage" style="border: silver solid 1px;">
                <div  class="mb-1 form-inline">
                     <label class="form-check-label lblLabel">- 以<span class="text-warning">行数据字符</span>为单位设置过滤条件</label>
                </div>
                <div  class="mb-1 ml-2 form-inline">
                    <select class="lblLabel" id="lineLengthUse">
                        <option value="true">保留</option>
                        <option value="false">删除</option>
                    </select>
                    <label class="lblLabel">&nbsp;行数据长度&nbsp;</label>
                    <select class="lblLabel" id="lineLengthType">
                        <option value="=">=</option>
                        <option value=">">&gt;</option>
                        <option value=">=">&gt;=</option>
                        <option value="<">&lt;</option>
                        <option value="<=">&lt;=</option>
                    </select>
                    &nbsp;
                    <input class="lblLabel" type="text" id="lineLength" style="width: 50px;">
                </div>
                <div  class="mb-1 ml-2 form-inline">
                    <select class="lblLabel" id="lineContentUse">
                        <option value="true">保留</option>
                        <option value="false">删除</option>
                    </select>
                    <label class="lblLabel">&nbsp;行数据内容&nbsp;</label>
                    <select class="lblLabel" id="lineContentType">
                        <option value="contain">contain</option>
                        <option value="unContain">unContain</option>
                        <option value="startsWith">startsWith</option>
                        <option value="endsWith">endsWith</option>
                    </select>
                    &nbsp;
                    <input class="lblLabel" type="text" id="lineContent" style="width: 160px;">
                </div>

                <div  class="mt-3 mb-1 form-inline">
                    <label class="form-check-label lblLabel">- 以<span class="text-warning">列字符</span>为单位设置过滤条件，
                    保留满足如下所有条件的数据：</label>
                </div>
                <div  class="mb-1 ml-2 form-inline">
                    <label class="lblLabel">列索引&nbsp;</label>
                    <input class="lblLabel" type="text" id="colIndex" style="width: 30px;">
                    <label class="lblLabel">&nbsp;对应值&nbsp;</label>
                    <select class="lblLabel" id="colContentType">
                        <option value="=">=</option>
                        <option value=">">&gt;</option>
                        <option value=">=">&gt;=</option>
                        <option value="<">&lt;</option>
                        <option value="<=">&lt;=</option>
                        <option value="contain">contain</option>
                        <option value="unContain">unContain</option>
                        <option value="startsWith">startsWith</option>
                        <option value="endsWith">endsWith</option>
                    </select>
                    &nbsp;
                    <input class="lblLabel" type="text" id="colContent" style="width: 160px;">
                    &nbsp;
                    <button type="button" class="btn btn-info btn-sm" style="padding: 0rem .5rem;" onclick="addCase()">add</button>
                </div>

                <div class="mb-1 ml-1 mr-1 pl-1 pr-1 pb-1 lblLabel" id="colCaseSetDiv" style="border: silver solid 1px;">
                    <!--
                    <div class="mt-1 mr-3 caseDiv" id="case0">
                        <span>列索引 0 对应值 = hello</span>&nbsp;
                        <button type="button" class="btn btn-danger btn-sm caseBtn" onclick="delCase(0)">del</button>
                    </div>
                    <div class="mt-1 mr-3 caseDiv" id="case1">
                        <span>列索引 0 对应值 = hello</span>&nbsp;
                        <button type="button" class="btn btn-danger btn-sm caseBtn" onclick="delCase(1)">del</button>
                    </div>
                    -->
                </div>

                <div  class="mt-3 mb-1 form-inline">
                    <label class="form-check-label lblLabel">- 按数据中的<span class="text-warning">指定列值去重</span></label>
                    &nbsp;
                    <input class="lblLabel" type="text" id="repeatColIndex" style="width: 265px;" placeholder="填写列索引，多值用;隔开，示例：0;3">
                </div>

                <div  class="mt-3 mb-1 form-inline">
                    <label class="form-check-label lblLabel">- <span class="text-warning">使用条件文件</span></label>
                    &nbsp;
                    <select class="lblLabel" id="caseFileFilterUse">
                        <option value="true">保留</option>
                        <option value="false">删除</option>
                    </select>
                    &nbsp;
                    <label class="form-check-label lblLabel">数据</label>
                </div>
                <div  class="mb-1 ml-2 form-inline">
                    <label class="lblLabel">数据文件与条件文件的列索引匹配关系设置&nbsp;</label>
                    <input class="lblLabel" type="text" id="caseFileFilterMatch" style="width: 164px;" placeholder="0-0;1-2;2-5">
                </div>
            </div>


            <div class="form-check">
                <input class="form-check-input" type="radio" name="handleType" id="handleType2" value="transform">
                <label class="form-check-label text-warning" for="handleType2"
                       data-toggle="collapse" href="#colTransPage" aria-expanded="false" aria-controls="colTransPage">
                    列值转换
                </label>
            </div>
            <div class="collapse pl-1" id="colTransPage" style="border: silver solid 1px;">
                <div class="mt-1 mb-1 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transType" id="transType1" value="1" checked>
                        <label class="form-check-label lblLabel" for="transType1">
                            删除指定列
                        </label>
                    </div>
                    &nbsp;
                    <input class="lblLabel" type="text" id="colRemoveIndex" style="width: 160px;" placeholder="设置对应索引，示例：0;3">
                </div>

                <div class="mb-1 mt-2 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transType" id="transType2" value="2">
                        <label class="form-check-label lblLabel" for="transType2">
                            设置指定列
                        </label>
                    </div>
                    &nbsp;
                    <input class="lblLabel" type="text" id="colTransSetValueIndex" style="width: 30px;" placeholder="0">
                    <label class="lblLabel">&nbsp;的值为&nbsp;</label>
                    <input class="lblLabel" type="text" id="colTransSetValue" style="width: 120px;" placeholder="myValue">
                </div>

                <div class="mb-1 mt-2 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transType" id="transType3" value="3">
                        <label class="form-check-label lblLabel" for="transType3">
                            列值拆到行：将第&nbsp;
                        </label>
                    </div>
                    <input class="lblLabel" type="text" id="colTransSplitIndex" style="width: 30px;" placeholder="0">
                    <label class="lblLabel">&nbsp;列的值按分隔符&nbsp;</label>
                    <input class="lblLabel" type="text" id="colTransSplitChar" style="width: 30px;" placeholder=",">
                    <label class="lblLabel">&nbsp;拆分到行</label>
                </div>

                <div class="mb-1 mt-2 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="transType" id="transType4" value="4">
                        <label class="form-check-label lblLabel" for="transType4">
                            使用条件文件转换
                        </label>
                    </div>
                </div>
                <div class="mb-1 ml-2 form-inline">
                    <label class="lblLabel">数据文件与条件文件索引映射设置&nbsp;</label>
                    <input class="lblLabel" type="text" id="colTransCaseIndexMatch" style="width: 164px;" placeholder="0-1;1-2">
                </div>
                <div class="mb-1 ml-2 form-inline">
                    <label class="lblLabel">将数据文件第&nbsp;</label>
                    <input class="lblLabel" type="text" id="colTransCaseFromIndex" style="width: 30px;" placeholder="0">
                    <label class="lblLabel">&nbsp;列的值替换为条件文件对应列的值&nbsp;</label>
                    <input class="lblLabel" type="text" id="colTransCaseToIndex" style="width: 60px;" placeholder="0;1;2">
                </div>
            </div>

            <div class="mt-2"></div>
            <h7 class="text-warning">数据导出设置</h7>
            <div class="pl-1" style="border: silver solid 1px">
                <div  class="mt-1 mb-2 form-inline">
                    <label class="lblLabel text-warning">导出数据目录*&nbsp;</label>
                    <input class="lblLabel col-md-10" type="text" id="exportDir">
                </div>
                <div  class="mt-1 mb-2 form-inline">
                    <label class="lblLabel">导出数据分隔符(默认为 ; )&nbsp;</label>
                    <input class="lblLabel" type="text" id="exportSplit" style="width: 30px;" placeholder=";">
                </div>

                <label class="lblLabel">导出文件生成方式</label>
                <div class="mb-1 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportFileType" id="exportFileType1" value="1" checked>
                        <label class="form-check-label lblLabel" for="exportFileType1">
                            基于数据文件名称
                        </label>
                    </div>
                </div>
                <div class="mb-1 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportFileType" id="exportFileType2" value="2" >
                        <label class="form-check-label lblLabel" for="exportFileType2">
                            基于文件个数，将数据分散保存到&nbsp;
                        </label>
                        <input class="lblLabel" type="text" id="exportFileNum" style="width: 50px;" placeholder="2">
                        <label class="lblLabel">&nbsp;个文件中</label>
                    </div>
                </div>
                <div class="mb-1 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportFileType" id="exportFileType3" value="3" >
                        <label class="form-check-label lblLabel" for="exportFileType3">
                            基于文件大小，最大&nbsp;
                        </label>
                        <input class="lblLabel" type="text" id="exportFileSize" style="width: 50px;" placeholder="500">
                        <label class="lblLabel">&nbsp;MB一个文件</label>
                    </div>
                </div>
                <div class="mb-1 form-inline">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exportFileType" id="exportFileType4" value="4" >
                        <label class="form-check-label lblLabel" for="exportFileType4">
                            基于数据列值，根据数据列索引&nbsp;
                        </label>
                        <input class="lblLabel" type="text" id="exportFileCol" style="width: 50px;" placeholder="0;1;2">
                        <label class="lblLabel">&nbsp;对应值生成保存文件</label>
                    </div>
                </div>
            </div>

            <div class="form-inline mt-2 lblLabel">
                <button type="button" style="padding: 0rem .5rem;"
                        class="btn btn-sm btn-success" onclick="startWork()">开 始</button>
                &nbsp;
                <button type="button" style="padding: 0rem .5rem;"
                        class="btn btn-sm btn-info" onclick="queryState()">刷 新</button>
                &nbsp;&nbsp;
                <span id="tips">点击开始按钮处理数据</span>
            </div>
        </div>


        <div class="col-lg-2"></div>
    </div>
</body>
<script>
 const caseMap = new Map();
 let caseNum = -1;

 $(function () {

 });



 function startWork() {
    let sourcePath = $('#sourcePath').val().trim();
    if(sourcePath.length==0) {
        $('#sourcePath').focus();
        alert("未指定数据文件路径");
        return;
    }

    let sourceSplit = $('#sourceSplit').val().trim();
    if(sourceSplit.length==0) {
        sourceSplit = ';';
    }

     let casePath = $('#casePath').val().trim();
     if(casePath.length==0) {
         casePath = null;
     }

     let caseSplit = $('#caseSplit').val().trim();
     if(caseSplit.length==0) {
         caseSplit = ';';
     }

     // filter或transform
     let handleType = $('input:radio[name="handleType"]:checked').val();

     // 过滤参数设置
     let filterParam = null;
     if(handleType == 'filter') {
         let lineCaseLength = null;
         if($('#lineLength').val().trim().length>0) {
             lineCaseLength = {"use":$('#lineLengthUse').val(), "opt":$('#lineLengthType').val(), "value":$('#lineLength').val().trim()};
         }
         let lineCaseContent = null;
         if($('#lineContent').val().length>0) {
             lineCaseContent = {"use":$('#lineContentUse').val(), "opt":$('#lineContentType').val(), "value":$('#lineContent').val()};
         }

         let colCaseList = new Array();
         for(const x of caseMap.values()) {
             colCaseList.push(x);
         }

         let repeatRemove = $('#repeatColIndex').val().trim();
         if(repeatRemove.length==0) {
             repeatRemove = null;
         }

         let caseFileFilter = null;
         if($('#caseFileFilterMatch').val().trim().length>0) {
             caseFileFilter = {"use":$('#caseFileFilterUse').val(), "match":$('#caseFileFilterMatch').val().trim()}
         }

         filterParam = {"lineLength":lineCaseLength, "lineContent":lineCaseContent,
             "colCaseList":colCaseList, "repeatRemove":repeatRemove, "caseFileFilter":caseFileFilter}
     }

     // 转换参数设置
     let transConf = null;
     if(handleType == 'transform') {
         let transType = $('input:radio[name="transType"]:checked').val();

         let removeIndex = null;
         if(transType == '1') {
             removeIndex = $('#colRemoveIndex').val().trim();
             if(removeIndex.length==0) {
                 removeIndex = null;
             }
         }

         let colSetVal = null;
         if(transType == '2') {
             let colIndexSet = $('#colTransSetValueIndex').val().trim();
             if(colIndexSet.length>0 && $('#colTransSetValue').val().trim().length>0) {
                 colSetVal = colIndexSet+'@'+$('#colTransSetValue').val().trim();
             }
         }

         let colSplitLine = null;
         if(transType == '3') {
             let colSplit = $('#colTransSplitIndex').val().trim();
             if(colSplit.length>0 && $('#colTransSplitChar').val().trim().length>0) {
                 colSplitLine = colSplit+'@'+$('#colTransSplitChar').val().trim();
             }
         }

         let transByCase = null;
         if(transType == '4') {
             let indexMatch = $('#colTransCaseIndexMatch').val().trim();
             if(indexMatch.length==0) {
                 $('#colTransCaseIndexMatch').focus();
                 alert("条件文件转换参数配置错误");
                 return;
             }
             let transIndex = $('#colTransCaseFromIndex').val().trim();
             if(transIndex.length==0) {
                 $('#colTransCaseFromIndex').focus();
                 alert("条件文件转换参数配置错误");
                 return;
             }
             let caseIndex = $('#colTransCaseToIndex').val().trim();
             if(caseIndex.length==0) {
                 $('#colTransCaseToIndex').focus();
                 alert("条件文件转换参数配置错误");
                 return;
             }
             transByCase = {"indexMatch":indexMatch, "transIndex":transIndex, "caseIndex":caseIndex}
         }

         transConf = {"removeIndex":removeIndex, "colSetVal":colSetVal, "colSplitLine":colSplitLine, "transByCase":transByCase}
     }

     // 数据导出设置
     let exportConf = null;
     let output = $('#exportDir').val().trim();
     if(output.length<1) {
         $('#exportDir').focus();
         alert("导出数据目录设置错误");
         return;
     }

     let exportSplit = $('#exportSplit').val().trim();
     if(exportSplit.length==0) {
         exportSplit = ';';
     }

     let expType = $('input:radio[name="exportFileType"]:checked').val();
     let expByName = "false";
     if(expType=='1') {
         expByName = "true";
     }

     let expByFileNum = null;
     if(expType=='2') {
         expByFileNum = $('#exportFileNum').val().trim();
         if(expByFileNum.length==0) {
             $('#exportFileNum').focus();
             alert("数据导出参数设置错误：未指定文件个数");
             return;
         }
     }

     let expByFileSize = null;
     if(expType=='3') {
         expByFileSize = $('#exportFileSize').val().trim();
         if(expByFileSize.length==0) {
             $('#exportFileSize').focus();
             alert("数据导出参数设置错误：未指定文件大小");
             return;
         }
     }

     let expByCol = null;
     if(expType=='4') {
         expByCol = $('#exportFileCol').val().trim();
         if(expByCol.length==0) {
             $('#exportFileCol').focus();
             alert("数据导出参数设置错误：未指定文件个数");
             return;
         }
     }

     exportConf = {"output":output, "dataSplit":exportSplit, "expByName":expByName,
     "expByFileNum":expByFileNum, "expByFileSize":expByFileSize, "expByCol":expByCol}

     let jsonParam = JSON.stringify({"sourcePath":sourcePath, "sourceSplit":sourceSplit,
     "casePath":casePath, "caseSplit":caseSplit, "filterConf":filterParam, "transConf":transConf,
         "exportConf":exportConf});

     $.ajax({
         url:'execute',
         type:'POST',
         async:false,
         data:jsonParam,
         timeout:60000,
         contentType: "application/json;charset=UTF-8",
         success:function(result){
             if(""+result.message == "success") {
                 $('#tips').text(result.data);
             }else {
                 $('#tips').text('执行失败！'+result.message);
             }
         },
         error:function(result){
             $('#tips').text('执行失败！'+result.message);
         }
     })
 }

 function queryState() {
     $.ajax({
         url:'queryState',
         type:'POST',
         async:false,
         timeout:3000,
         success:function(result){
             if(""+result.message == "success") {
                 $('#tips').text(result.data);
             }else {
                 $('#tips').text('获取状态失败！'+result.message);
             }
         },
         error:function(result){
             $('#tips').text('获取状态失败！'+result.message);
         }
     })
 }

 function delCase(id) {
     const caseId = 'case'+id;
     $('#'+caseId).remove();
     caseMap.delete(caseId);
 }

 function addCase() {
     let colIndex = parseInt($('#colIndex').val());

     console.info(colIndex);

     if(!Number.isInteger(colIndex)) {
         $('#colIndex').focus();
         alert("参数有误：列索引应为非负整数！");
         return;
     }else {
         colIndex = parseInt(colIndex);
         if(colIndex < 0) {
             $('#colIndex').focus();
             alert("参数有误：列索引应为非负整数！");
             return;
         }
     }

     let colContent = $('#colContent').val();
     if(colContent.length==0) {
         $('#colContent').focus();
         alert("参数有误：比较值不能为空船");
         return;
     }

     let colContentType = $('#colContentType').val();

     caseNum = caseNum + 1;
     const caseId = 'case'+caseNum;

     let divItem = '<div class="mt-1 mr-3 caseDiv" id="' + caseId + '">';
     divItem = divItem + '<span>列索引 ' + colIndex + ' 对应值 ' + colContentType + ' ' + colContent + '</span>&nbsp;';
     divItem = divItem + '<button type="button" class="btn btn-danger btn-sm caseBtn" onclick="delCase('+caseNum+')">del</button>';
     divItem = divItem + '</div>';

     $('#colCaseSetDiv').append(divItem);

     caseMap.set(caseId, {"index": colIndex, "opt": colContentType, "value": colContent});
 }

</script>
<script th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script>
</html>